<template>

<vg-button @click="open">打开弹窗</vg-button>
<vg-button @click="open2">居中</vg-button>
<vg-button @click="open3">大小</vg-button>
<vg-dialog v-model="visible">
    <div>我是弹出窗</div>
    <template v-slot:footer>
        <div class="btnList">
            <vg-button type="info" @click="close" size="mini">取消</vg-button>
        <vg-button type="primary" size="mini">确认</vg-button>
        </div>

    </template>
</vg-dialog>

<vg-dialog v-model="visible2" :center="true">
    <div>我是弹出窗</div>
    <template v-slot:footer>
        <div class="btnList">
            <vg-button type="info" @click="close2" size="mini">取消</vg-button>
        <vg-button type="primary" size="mini">确认</vg-button>
        </div>

    </template>
</vg-dialog>

<vg-dialog v-model="visible3" width="60%" top="25vh">
    <div>我是弹出窗</div>
    <template v-slot:footer>
        <div class="btnList">
            <vg-button type="info" @click="close3" size="mini">取消</vg-button>
        <vg-button type="primary" size="mini">确认</vg-button>
        </div>

    </template>
</vg-dialog>

</template>

<script>
 import { defineComponent, ref, } from 'vue';
 import vgButton from "../packages/button"
 import vgDialog from '../packages/dialog/src/dialog.vue';
 export default defineComponent({
    components:{vgDialog,vgButton},
    setup(){

        const visible = ref(false)
        const visible2 = ref(false)
        const visible3 = ref(false)

        function open(){
            console.log("1");
            visible.value = !visible.value
        }

        function close(){
            visible.value = !visible.value
        }

        function open2(){
            console.log("1");
            visible2.value = !visible2.value
        }

        function close2(){
            visible2.value = !visible2.value
        }

        function open3(){
            console.log("1");
            visible3.value = !visible3.value
        }

        function close3(){
            visible3.value = !visible3.value
        }


        return {
            open,
            close,
            visible,
            open2,
            close2,
            visible2,
            open3,
            close3,
            visible3
        }
    }
 })
</script>
<style lang="scss">
.btnList{
       & button:nth-child(n+2){
            margin-left: 12px;
       }
}
</style>